<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--<meta http-equiv="Content-Type" content="text/html; charset=utf-8">-->

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #allmap{width:100%;height:500px;}
        p{margin-left:5px; font-size:14px;}
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=98XNslGfUeI2OoqQTAn7m6oy2BVgVDdQ"></script>
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=98XNslGfUeI2OoqQTAn7m6oy2BVgVDdQ"></script>
</head>
<body class="hold-transition" style="background:#CBE1FF">
<div id="app">
    <div class="content-header">
        <h1>首页
            <small>公司分布图</small>
        </h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>公司分布图</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <template>
            <el-tabs v-model="activeName">
                <el-tab-pane label="分布图" name="first">
                    <iframe name="right" class="el-main" src="../pages/map.html" width="100%" height="580px"
                            frameborder="0"></iframe>
                </el-tab-pane>
            </el-tabs>
        </template>
    </div>
</div>
</body>


<script >
    var vue = new Vue({

    })
   /* var vue = new Vue({
        el: '#app',
        data: {
            dataList: [],//列表数据
            formData: {},//表单数据
            tableData: [],//新增和编辑表单中对应的检查项列表数据
            dialogFormVisible: false,//控制添加窗口显示/隐藏
            dialogFormVisible4Edit: false,//控制编辑窗口显示/隐藏
            address_detail: '', //详细地址
            userlocation:{lng: "", lat: ""},
            // companylocation:{lng: "", lat: ""}
            rules: {//校验规则
                addressName: [{required: true, message: '体检机构名为必填项', trigger: 'blur'}],
            }
        },
        methods: {
            createMap() {
                const _this = this;
                function G(id) {
                    return document.getElementById(id);
                }

                var map = new BMap.Map("allmap");
                map.centerAndZoom("合肥",12);                   // 初始化地图,设置城市和地图级别。

                var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
                    {"input" : "suggestId"
                        ,"location" : map
                    });

                ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
                    var str = "";
                    var _value = e.fromitem.value;
                    var value = "";
                    if (e.fromitem.index > -1) {
                        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                    }
                    str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

                    value = "";
                    if (e.toitem.index > -1) {
                        _value = e.toitem.value;
                        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                    }
                    str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
                    G("searchResultPanel").innerHTML = str;
                });

                var myValue;
                ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
                    var _value = e.item.value;
                    // alert(e.myValue.lat);
                  //   alert(_value.keyword);

                    //  _this.formData.detailaddress=_value.keyword;
                    myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                   // alert(myValue);

                    //赋值详细地址
                    _this.formData.detailaddress=myValue;
                    G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

                    setPlace();
                });

                function setPlace(){
                    map.clearOverlays();    //清除地图上所有覆盖物
                    function myFun(){
                        var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果


                        _this.formData.lng=pp.lng;
                        _this.formData.lat=pp.lat;

                        map.centerAndZoom(pp, 18);
                        map.addOverlay(new BMap.Marker(pp));    //添加标注
                    }
                    var local = new BMap.LocalSearch(map, { //智能搜索
                        onSearchComplete: myFun
                    });

                    local.search(myValue);


                }
            },
            updateMap1(lng,lat){
                // 百度地图API功能
                var map = new BMap.Map("utemap");
                 map.centerAndZoom(new BMap.Point(lng,lat),11);
                map.enableScrollWheelZoom(true);

                // 用经纬度设置地图中心点

                        map.clearOverlays();
                        var new_point = new BMap.Point(lng,lat);
                        var marker = new BMap.Marker(new_point);  // 创建标注
                        map.addOverlay(marker);              // 将标注添加到地图中
                        map.panTo(new_point);


            },
                updateMap(lng,lat){
                    const _this = this;
                    function G(id) {
                        return document.getElementById(id);
                    }

                    var map = new BMap.Map("utemap");
                    map.centerAndZoom(new BMap.Point(lng,lat),11);                // 初始化地图,设置城市和地图级别。

                    //--------------
                    map.clearOverlays();
                    var new_point = new BMap.Point(lng,lat);
                    var marker = new BMap.Marker(new_point);  // 创建标注
                    map.addOverlay(marker);              // 将标注添加到地图中
                    map.panTo(new_point);
                    //--------------


                    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
                        {"input" : "suggestId"
                            ,"location" : map
                        });

                    ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
                        var str = "";
                        var _value = e.fromitem.value;
                        var value = "";
                        if (e.fromitem.index > -1) {
                            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                        }
                        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

                        value = "";
                        if (e.toitem.index > -1) {
                            _value = e.toitem.value;
                            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                        }
                        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
                        G("searchResultPanel4Edit").innerHTML = str;
                    });

                    var myValue;
                    ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
                        var _value = e.item.value;
                        // alert(e.myValue.lat);
                        //   alert(_value.keyword);

                        //  _this.formData.detailaddress=_value.keyword;
                        myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                        // alert(myValue);

                        //赋值详细地址
                        _this.formData.detailaddress=myValue;
                        G("searchResultPanel4Edit").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

                        setPlace();
                    });

                    function setPlace(){
                        map.clearOverlays();    //清除地图上所有覆盖物
                        function myFun(){
                            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果


                            _this.formData.lng=pp.lng;
                            _this.formData.lat=pp.lat;

                            map.centerAndZoom(pp, 18);
                            map.addOverlay(new BMap.Marker(pp));    //添加标注
                        }
                        var local = new BMap.LocalSearch(map, { //智能搜索
                            onSearchComplete: myFun
                        });

                        local.search(myValue);


                    }
           },
            //分页查询
            findPage() {
                let params = {
                    currentPage: this.pagination.currentPage,
                    pageSize: this.pagination.pageSize,
                    queryString: this.pagination.queryString
                };

                axios.get("/address/findPage", {params: params}).then(resp => {

                    this.dataList = resp.data.data.rows;
                    this.pagination.total = resp.data.data.total;


                })

            },
            // 重置表单
            resetForm() {
                this.imageUrl=null;
                this.formData={};
            },
            // 弹出添加窗口
            handleCreate() {
                this.resetForm();
                this.dialogFormVisible = true;


            },
            // 弹出编辑窗口
            handleUpdate(row) {
                this.resetForm();
                this.dialogFormVisible4Edit=true;
                axios.get("/address/findUpdate/"+row.id).then(resp=>{


                    this.formData=resp.data.data;
                    this.imageUrl = "http://qgg5hsnp8.hd-bkt.clouddn.com/" + this.formData.map;
                    this.address_detail=resp.data.data.detailaddress;
                    this.updateMap(this.formData.lng,this.formData.lat);
                    return;
                });
            },
            handleEdit(){
                this.dialogFormVisible4Edit=false;

                axios.put("/address/edit",this.formData).then(resp=>{
                    this.findPage();
                    return;

                  //  this.$message.error(resp.data.data.message);

                });


            },
            //切换页码
            handleCurrentChange(currentPage) {
                this.pagination.currentPage=currentPage;
                this.findPage();
            },
            // 删除
            handleDelete(row) {

                this.$confirm("您确定要删除此记录吗?","提示",{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    axios.delete("/address/"+row.id).then(resp=>{


                        if (resp.data.flag){
                            this.$message.success(resp.data.message);
                            this.findPage();
                        }else {
                            this.$message.error(resp.data.message);
                        }

                    });
                });


               /!*
                axios.delete("/address/"+row.id).then(resp=>{
                    if(resp.data.flag){
                        this.$message.success("删除成功");
                        this.findPage();
                        return;
                    }

                });*!/

            },
            handleAdd() {


                axios.post("/address/add",this.formData).then(resp=>{
                    this.dialogFormVisible=false;
                    this.findPage();
                })

            },
           /!* handleClick(tab, event) {

            },*!/
        }
    });*/
</script>




</html>